<template>
  <div style="padding: 20px;">
    <Row>
      <i-col span="24">
        <Input placeholder="搜索门店名称" v-model="searchValue" style="width: 150px;margin-bottom: 10px" />
        <Button style="margin: 0 10px 10px 0;" type="primary" @click="searchShop">搜索</Button>
        <Button style="margin: 0 10px 10px 0;float: right;" type="primary" @click="addShop">添加门店</Button>
      </i-col>
      <i-col span="24">
        <Table border :columns="shopTitle" :data="shopList"></Table>
        <page-com :total="total" @page-change="pageChange"></page-com>
      </i-col>
    </Row>
    <Modal v-model="add_shop" :title="title" :width="750" @on-ok="sbtShop(title)" @on-cancel="cancel" :mask-closable="false">
      <Form :model="addShopForm" :label-width="80" :rules="addShopFormRule">
        <FormItem label="门店名称" prop="storeName">
          <Input v-model="addShopForm.storeName" placeholder="请输入门店名称" />
        </FormItem>
        <FormItem label="所属省市" v-if="cityShow"  prop="address">
          <al-selector v-model="addShopForm.address" level="2" gutter="0" size="default" @on-change="cityChange" class="selector"/>
        </FormItem>
        <FormItem label="详细地址"  prop="addressDetail">
          <Input v-model="addShopForm.addressDetail" placeholder="请输入详细地址" />
        </FormItem>
        <FormItem label="联系人"  prop="username">
          <Input v-model="addShopForm.username" placeholder="请输入联系人名字" />
        </FormItem>
        <FormItem label="联系方式"  prop="phone">
          <Input v-model="addShopForm.phone" placeholder="请输入联系人手机号" />
        </FormItem>
        <FormItem label="设置禁启">
          <i-switch size="large" v-model="addShopForm.status"  @on-change.self="shopStatusChange">
            <span slot="open">启用</span>
            <span slot="close">禁用</span>
          </i-switch>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
  import PageCom from '_c/page'
  const url = '/api/storee'
  export default {
    name: 'storesList',
    data () {
      return {
        add_shop: false,
        title: '',
        cityShow: false,
        number: 1,
        size: 10,
        total: 0,
        searchValue: '',
        placeholder: [],
        addShopForm: {
          status: true
        },
        addShopFormRule: {
          storeName: [
            { required: true, message: '请输入门店名称', trigger: 'blur' }
          ],
          address: [
            { required: true, message: '请选择城市', trigger: 'blur' }
          ],
          addressDetail: [
            { required: true, message: '请输入详细地址', trigger: 'blur' }
          ],
          username: [
            { required: true, message: '请输入联系人', trigger: 'blur' }
          ],
          phone: [
            { required: true, message: '请输入联系电话', trigger: 'blur' }
          ]
        },
        shopTitle: [
          {
            title: '门店编号',
            align: 'center',
            key: 'id',
            tooltip: true
          },
          {
            title: '门店名称',
            align: 'center',
            key: 'storename',
            tooltip: true
          },
          {
            title: '所属省市',
            align: 'center',
            width: 250,
            render: (h, params) => {
              return h('div', [
                h('p', params.row.address.join(','))
              ])
            }
          },
          {
            title: '详细地址',
            align: 'center',
            tooltip: true,
            key: 'addressDetail'
          },
          {
            title: '联系人',
            align: 'center',
            tooltip: true,
            key: 'username'
          },
          {
            title: '联系方式',
            tooltip: true,
            align: 'center',
            key: 'phone'
          },
          {
            title: '录入时间',
            tooltip: true,
            align: 'center',
            render: (h, params) => {
              return h('div', this.$formatDate(new Date(params.row.createTime), 'yyyy-MM-dd hh:mm'))
            }
          },
          {
            title: '录入人',
            align: 'center',
            tooltip: true,
            key: 'createId'
          },
          {
            title: '更新时间',
            align: 'center',
            tooltip: true,
            render: (h, params) => {
              return h('div', this.$formatDate(new Date(params.row.updateTime), 'yyyy-MM-dd hh:mm'))
            }
          },
          {
            title: '更新人',
            align: 'center',
            tooltip: true,
            key: 'updateId'
          },
          {
            title: '状态',
            align: 'center',
            render: (h, params) => {
              const row = params.row
              const color = row.status === '1' ? 'primary' : row.status === '0' ? 'error' : ''
              const text = row.status === '1' ? '正常' : row.status === '0' ? '禁用' : ''
              return h('Tag', {
                props: {
                  type: 'dot',
                  color: color
                }
              }, text)
            }
          },
          {
            title: '操作',
            key: 'action',
            width: 150,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.editorShow()
                      let row = params.row
                      this.addShopForm.status = Boolean(row.status === '1' ? 1 : 0)
                      this.addShopForm.address = row.address
                      this.addShopForm.addressDetail = row.addressDetail
                      this.addShopForm.phone = row.phone
                      this.addShopForm.storeName = row.storename
                      this.addShopForm.username = row.username
                      this.addShopForm.id = row.id
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title: '你确定删除该用户吗？',
                        okText: '确定',
                        cancelText: '取消',
                        onOk: () => {
                          let row = params.row
                          this.removeShop(row.id)
                        }
                      })
                    }
                  }
                }, '删除')
              ])
            }
          }
        ],
        shopList: [],
        cityList: []
      }
    },
    mounted() {
      this.storeList(this.number)
    },
    methods: {
      length(text) {
        let str = text
        if (str.length > 6) {
          return str.substring(0, 6) + '...'
        } else {
          return str
        }
      },
      cityChange(change) {
        let city = change
        let arr = []
        for (let i = 0; i < city.length; i++) {
          let name = city[i].name
          arr.push(name)
          this.addShopForm.address = arr
        }
      },
      storeList() {
        this.$post(url + '/query', this.$qs.stringify({
          searchValue: this.searchValue,
          pageSize: this.size,
          pageNumber: this.number
        })).then((res) => {
          if (res.code === 0) {
            this.shopList = res.data
            this.total = res.count
          }
        })
      },
      showModel (title) {
        this.add_shop = true
        this.title = title
      },
      addShop () {
        this.cityShow = true
        this.showModel('添加门店')
      },
      editorShow () {
        this.cityShow = true
        this.showModel('编辑门店')
      },
      shopStatusChange (status) {
        this.addShopForm.status = status
      },
      sbtShop(title) {
        if (title === '添加门店') {
          this.determineAdd()
        } else {
          this.submitEdit()
        }
      },
      inputNull() {
        if (!this.addShopForm.storeName) {
          this.$Message.error('请添加门店名称')
          return false
        } else if (!this.addShopForm.address) {
          this.$Message.error('请选择城市')
          return false
        } else if (!this.addShopForm.addressDetail) {
          this.$Message.error('请添加详细地址')
          return false
        } else if (!this.addShopForm.username) {
          this.$Message.error('请添加联系人')
          return false
        } else if (!this.addShopForm.phone) {
          this.$Message.error('请添加联系方式')
          return false
        }
      },
      determineAdd () {
        this.inputNull()
        this.addShopForm.status = Number(this.addShopForm.status)
        this.$post(url, this.addShopForm).then((res) => {
          this.$Message.success('添加成功')
          this.storeList()
          this.cancel()
        }).catch((rel) => {
          this.$Message.error('添加失败')
        })
      },
      submitEdit () {
        this.addShopForm.status = Number(this.addShopForm.status)
        this.$put(url, this.addShopForm).then((res) => {
          if (res.code === 200) {
            this.$Message.success('修改成功')
            this.storeList()
            this.storeList()
            this.cancel()
          } else {
            this.$Message.error('修改失败')
          }
        })
      },
      searchShop () {
        if (!this.searchValue) {
          this.$Message.warning('请输入查询条件')
          return
        }
        this.storeList()
      },
      removeShop(id) {
        this.$deletes(url + `/${id}`, {id: id}).then((res) => {
          console.log(res)
          if (res.code === 200) {
            this.$Message.success('删除成功')
            this.storeList()
          } else {
            this.$Message.error('删除失败')
          }
        })
      },
      pageChange(data) {
        this.number = data + 1
        this.storeList()
      },
      cancel() {
        this.addShopForm = {}
        this.addShopForm.status = true
        this.cityShow = false
      }
    },
    components: {
      PageCom
    }
  }
</script>

<style scoped>
  .ivu-row {
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  .selector .ivu-row ivu-col-span-8{
    margin-left: 0px !important;
    margin-right: 0px !important;
    width: 33% !important;
  }
</style>
